﻿.tabs {
    display: flex;
    flex-direction: column;
    border: 1px dashed #ccc;
    background-color: white;
}

    .tabs .tabs-tab-list {
        display: flex;
        height: 35px;
        padding: 5px 0 0 5px;
        border-bottom: 1px solid #ccc;
        white-space: nowrap;
    }

        .tabs .tabs-tab-list .tab {
            display: flex;
            align-items: center;
            position: relative;
            border: 1px solid #ccc;
            border-bottom: none;
            border-radius: 5px 5px 0 0;
            padding: 10px 25px;
            margin-right: 5px;
            min-width: 50px;
            cursor: pointer;
        }

            .tabs .tabs-tab-list .tab.active:after {
                content: "";
                position: absolute;
                left: 0;
                right: 0;
                bottom: -1px;
                height: 1px;
                background-color: white;
            }

            .tabs .tabs-tab-list .tab ::deep .delete-tab {
                position: absolute;
                display: none;
                right: 5px;
                top: 6px;
            }

            .tabs .tabs-tab-list .tab:hover ::deep .delete-tab {
                display: block;
            }

        .tabs .tabs-tab-list .tab-tools {
            display: flex;
            align-items: center;
            justify-content: start;
            gap: 10px;
            padding: 10px;
            min-width: 30px;
            cursor: pointer;
            visibility: hidden;
            opacity: 0;
        }

        .tabs .tabs-tab-list:hover .tab-tools {
            transition: opacity 0.5s;
            visibility: visible;
            opacity: 1;
        }

    .tabs .tabs-content-panels {
        flex: 1;
    }
